<template>
  <view class="EnrollList">
    <scroll-view :scroll-y="true" class="ScroViewClass" enable-back-to-top="true">

      <view class="cu-form-group">
        <view class="title">学生姓名</view>
        <input placeholder="请输入学生姓名" @input="onClassIDConfirm">
<!--        <button class='cu-btn bg-blue shadow' @tap="studentNameCheck">查询</button>-->
      </view>

      <view class="cu-form-group">
        <view class="title">班级名称</view>
        <input placeholder="请输入班级名称" @input="onClassNameConfirm">
      </view>

      <view class="cu-form-group">
        <view class="title">审核状态</view>
        <radio-group @change="SH_FLAGChange">
          <view class="flex">
            <view v-for="item in SH_FLAGOpts" :key="item.value">
              <label class="text-sm">{{ item.label }}</label>
              <radio
                  :class="['radio','blue',curSelectSH_FLAG === item.value ? 'checked' : '']"
                  :checked="curSelectSH_FLAG === item.value"
                  :value="item.value"
                  style="transform: scale(0.8)"
              >
              </radio>
            </view>
          </view>
        </radio-group>
      </view>
	<scroll-view scroll-x="true">
		<view class="table-lists">
			<view class="table-title">
				<view class="">单科ID</view>
				<view class="">学号</view>
				<view class="">学生性质</view>
				<view class="">学员名称</view>
				<view class="">班级名称</view>
				<view class="">提交时间</view>
				<view class="">状态</view>
			</view>
			
			<view class="table-item">
				<view v-for="item in enrollVerifyList"
					:key="item.CBM_ID" @tap="toDetail(item.CBM_ID)">
					<view class="">{{item.CBM_ID}}</view>
					<view class="" style="text-decoration: underline;color: blue;">{{item.STUDENTNO}}</view>
					<view class="">{{item.STUDENT_FLAGNR}}</view>
					<view class="">{{item.STUDENTNAME}}</view>
					<view class="">{{item.CLASSNAME}}</view>
					<view class="" style="text-align: center;">{{item.OPERTIME}}</view>
					<view>
						<text :class="`bg-${statusColorFilter(item.SH_FLAGNR)}`" style="padding: 5rpx;"> {{ item.SH_FLAGNR }}</text>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
	 <view v-if="enrollVerifyList.length === 0" class="text-sm text-center">-- 暂无数据 --</view>
      <view class="cu-form-group" v-if="totalPage > 0">
        <view class="title" @tap="firstPage()"><text class="check-info-btn">首页</text></view>
        <view class="title" @tap="lastPage()"><text class="check-info-btn">上一页</text></view>
        <view class="title">{{page}}/{{totalPage}}</view>
        <view class="title" @tap="nextPage()"><text class="check-info-btn">下一页</text></view>
        <view class="title" @tap="endPage()"><text class="check-info-btn">尾页</text></view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import {useStore} from "vuex";
import {usePagination} from "../../utils/usePagination";
import {computed, onMounted, ref} from "vue";
import {getVerifyEnrollDetail} from "../../api/enroll";
import {onPullDownRefresh,onShow} from "@dcloudio/uni-app";
import {useVerifyEnrollList} from "./useVerifyEnrollList";

const {state} = useStore()
const {initVerifyEnrollList, total, enrollVerifyList} = useVerifyEnrollList()
// const {majorOpts} = useMajorList()
const pageSize = 20

function statusColorFilter(statusNR: string){
  let color = 'gray'
  switch (statusNR){
    case '未审核':{
      color = 'yellow'
      break
    }

    case '审核通过':{
      color = 'green'
      break
    }

    case '审核不通过': {
      color = 'red'
      break
    }
  }

  return color
}

onShow(() => {
	initVerifyEnrollList(page.value,20,{
		SH_FLAG:curSelectSH_FLAG.value,
		CLASSNAME:inputClassName.value,
		STUDENTNAME:inputStudentName.value
	})
	uni.$on('finishVerify',() => {
		const oldPage = page.value
		page.value = -1
		page.value = oldPage
	})
})

const curSelectSH_FLAG = ref<'0' | '1' | '2'>('0')

async function SH_FLAGChange(e: any){
  curSelectSH_FLAG.value = e.detail.value
  // await initData()
  page.value = 1
}

const curPickClassIdx = ref(-1)
const SH_FLAGOpts = [
  {
    value: '0',
    label: '未审核'
  },
  {
    value: '1',
    label: '已通过',
  },
  {
    value: '2',
    label: '不通过'
  }
]


const inputStudentName = ref('')

function onClassIDConfirm(e: any){
  inputStudentName.value = e.detail.value
  page.value = 1
}
const inputClassName = ref('')
function onClassNameConfirm(e: any){
  inputClassName.value = e.detail.value
  page.value = 1
}

const {page} = usePagination({
  page: 1,
  pageSize,
  onPageChange: initVerifyEnrollList,
  startReachBottom: false,
  args: ref({
    STUDENTNAME: inputStudentName,
    CLASSNAME: inputClassName,
    SH_FLAG: curSelectSH_FLAG
  })
})


const totalPage = computed(() => parseInt(String(total.value / pageSize)) + (total.value % pageSize === 0 ? 0 : 1))
function firstPage() {
  page.value = 1
}

function lastPage(){
  if (page.value > 1){
    page.value--
  }
}

function nextPage() {
  if (page.value < totalPage.value){
    page.value++
  }
}

function endPage(){
  page.value = totalPage.value
}

async function toDetail(id: string | number) {
  try {
    const res = await getVerifyEnrollDetail({
      CBM_ID: String(id),
      OPERATOR_ID: state.user.userInfo.CUSER_ID
    })
    if (res.ERROR[0].errcode == '0'){
      uni.navigateTo({
        url: `/pages/enroll/detail?info=${encodeURIComponent(JSON.stringify(res.DAT[0]))}&type=bmb`
      })
    }else {
      uni.showToast({
        title: res.ERROR[0].error,
        icon: 'none',
        mask: true
      })
    }
  }catch (err){
    uni.showToast({
      title: '获取报名表失败',
      icon: 'error',
      mask: true
    })
  }
}

onPullDownRefresh(() => {
  page.value = 1
  inputStudentName.value = ''
  curSelectSH_FLAG.value = '0'
  curPickClassIdx.value = -1
  uni.stopPullDownRefresh()
})
</script>

<style scoped lang="scss">
.EnrollList{
  .cu-form-group .title {
    min-width: calc(4em + 15px);
  }
  .check-info-btn {
    color: #01AAED;
  }
  .ScroViewClass {
    min-height: 300rpx;
    padding-bottom: constant(safe-area-inset-bottom);  ///兼容 IOS<11.2/
    padding-bottom: env(safe-area-inset-bottom);  ///兼容 IOS>11.2/
  }
  .table-title-bg {
    background-color: #DDDDDD;
  }

  .table-item:active{
    background-color: #DDDDDD;
  }
}
.table-lists{
		display: flex;
		flex-direction: column;
		width: 1500rpx;
		font-size: 24rpx;
		.table-title{
			width: 100%;
			display: flex;
			height: 120rpx;
			font-weight: 600;
			background-color: #DDDDDD;
			color: #585850;
			view{
				padding: 10rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.table-item{
			width: 100%;
			display: flex;
			flex-direction: column;
			view{
				width: 100%;
				display: flex;
				height: 100rpx;
				view{
					color: #666666;
					flex:1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
